<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>登录注册页面</title>
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style-login.css">
</head>

<body>



    <video src="https://as-soul.oss-cn-hangzhou.aliyuncs.com/video/asoul.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted">

    </video>

    <div class="dowebok" id="dowebok">
        <div class="form-container sign-up-container">
            <form  id="myform">
                <h1>注册</h1>
                <!-- <span>或使用邮箱注册</span> -->
                <input type="text" id="uname" name="username" placeholder="用户名">
                <input type="email" id="uemail" name="email" placeholder="电子邮箱">
                <input type="password" id="upassword" name="password" placeholder="密码">

                <button type="button" id="newuser" >注册</button>
<!--                <button>注册</button>-->
            </form>
        </div>
        
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>登录</h1>
                <!-- <span>或使用您的帐号</span> -->
                <input type="email"  id="email"   placeholder="邮箱">
                <input type="password" id="mimao"  placeholder="密码">
<!--                <a href="#">忘记密码？</a>-->
                <!-- <div class="btn" id="login" type="button">登录</div> -->
                <button type="button" id="login">登录</button>
            </form>
        </div>

        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有帐号？</h1>
                    <p>请使用您的帐号进行登录</p>
                    <button class="ghost" id="signIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有帐号？</h1>
                    <p>立即注册加入我们，和我们一起开始旅程吧</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        </div>

    </div>

<script src="static/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    //此脚本文件是使用Ajax技术实现登录页面的异步刷新  验证用户的账号和密码
    $(document).ready(function() {

        $("#login").click(function () {

            $.ajax({
                url: "api/login/?username="+$("#email").val()+"&password="+$("#mimao").val(),
                async: true,
                type:'post',
                dataType:'json',


                // 只有用户名和密码同时正确才能从数据库拿到数据
                success:function (responsedata) {
                    // let list = responsedata.data;
                    console.log(responsedata);


                    if(responsedata.msg == "success"){
                        //admin_user.html
                        window.localStorage.setItem("token",responsedata.obj);
                        window.location.href="index.html"

                        //验证成功，进入主页面
                        // location.href='admin_user.html'
                    }else {
                        //验证失败，给出提示信息
                        alert("错误")
                        // $('#msg').html('用户名或密码错误').css('color','red');
                    }
                }
            })
        })
    })

</script>

<script type="text/javascript">
    //教练注册
    $(function() {

        $("#newuser").click(function (){
            sendData();
        })


    //传数据到后端
    function sendData() {
        $.ajax({
            //后端url地址username="+$("#uname").val()+"&email="+$("#uemail").val()+"&password="+$("#upassword").val(),
            url: "add_user/?username="+$("#uname").val()+"&email="+$("#uemail").val()+"&password="+$("#upassword").val(),
            //决定是否异步
            async: true,
            //接口返回的数据类型
            dataType: "json",
            //提交请求的方式
            type: "post",
            contentType: "application/json",
            //请求成功后的操作
            success: function (responsedata) {
                alert("注册成功，可以开始登录了");
            },
            error:function () {
                alert("注册失败");

            }
        })
    }

    })



</script>

<script src="assets/js/index.js"></script>






</body>

</html>